<template>
	<view class='content'>
		<view class="info">
			<view class="title" @click="onChck(1)">
				<view>1.如何自助下单开台？</view>
				<image src="/static/jt.png" :class="{show:showCheck1}" />
			</view>
			<view class="texts" :class="{show:showCheck1}">
				<view class="text">
					利思泰采用微信扫码自助下单模式，您可以选择以下任意一种下单开台方式：
				</view>
				<view class="text">
					1.远程开台方式：①微信中搜索“利思泰自助台球”打开小程序；②在软件首页点击“即时开台”；③选择球台和开台时长后下单支付；④支付成功后相应球台自动亮灯；⑤到截止时点时系统自动操作关灯结束。
				</view>
				<view class="text">
					2.现场扫码方式：①微信扫描球台桌上的二维码；②选择开台时长后下单支付；③支付成功后该球台自动亮灯；④到截止时点时系统自动操作关灯结束。
				</view>
			
			</view>
		</view>
		<view class="info">
			<view class="title" @click="onChck(2)">
				<view>2.如何核销团购券？</view>
				<image src="/static/jt.png" :class="{show:showCheck2}" />
			</view>
			<view class="texts" :class="{show:showCheck2}">
				<view class="text">
					利思泰目前支持自助核销美团和大众点评的团购券，您可以选择以下任意一种下单验券开台方式：
				</view>
				<view class="text">
					1.远程开台方式：①微信中搜索“利思泰自助台球”打开小程序；②在软件首页点击“团购券开台”；③选择需要兑换的团购券（微信登录手机号与团购平台购买手机号不一致时需手动输入券码）；④选择球台并确认兑换时长后下单同时核销券码；⑤验证成功后相应球台自动亮灯；⑥到截止时点时系统自动操作关灯结束。
				</view>
				<view class="text">
					2.现场扫码方式：①微信扫描球台桌上的二维码；②在扫码开台页面点击“团购券开台”；③选择需要兑换的团购券（微信登录手机号与团购平台购买手机号不一致时需手动输入券码）；④确认球台和兑换时长后下单同时核销券码；⑤验证成功后该球台自动亮灯；⑥到截止时点时系统自动操作关灯结束。
				</view>
			</view>
		</view>
		<view class="info">
			<view class="title" @click="onChck(3)">
				<view>3.如何联系门店？</view>
				<image src="/static/jt.png" :class="{show:showCheck3}" />
			</view>
			<view class="texts" :class="{show:showCheck3}">
				<view class="text">
					我们在小程序首页的门店卡片中设置了门店详细地址、地图导航和到店路线指引模块，方便查找和抵达门店位置；同时在当前门店名称的右侧，您也可以查看到各门店店长的微信号和电话，有任何需要帮助的问题可进行联系；
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
import { ref, reactive, watch, getCurrentInstance, onMounted } from 'vue';
const showCheck1 = ref(true);
const showCheck2 = ref(false);
const showCheck3 = ref(false);
const onChck = (type)=>{
	switch (type) {
		case 1:
		showCheck1.value = !showCheck1.value;
			break;
			case 2:
		showCheck2.value = !showCheck2.value;
			break;
			case 3:
		showCheck3.value = !showCheck3.value;
			break;
		default:
			break;
	}
}
</script>
<style lang='less' scoped>
.content {
	margin: 18rpx 24rpx;
	.info {
		background-color: #fff;
		border-radius: 20rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
		padding: 20rpx 30rpx;
		margin-bottom: 24rpx;
		.title{
			font-size: 30rpx;
			font-weight: 800;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 2rpx;
			image{
				width: 18rpx;
          		height: 32rpx;
				transform: rotate(90deg);
				transition: all 0.3s ease-out;
				&.show{
					transform: rotate(-90deg);
				}
			}
		}
		.texts{
			max-height: 0;
			overflow: hidden;
			transition: all 0.3s linear;
			&.show{
				max-height: 100vh;
			}
		}
		.text{
			line-height: 48rpx;
		}
	}
}</style>